<template>
   <SdyHeader title="啥都有">
      <template #left>
         <van-icon class="cate-icon" name="gold-coin-o" />
      </template>
      <template #title>
         <van-search @focus="inSearchHandler" shape="round" background="#c72418" placeholder="请输入搜索关键词" />
      </template>
      <template #right>
         <span v-if="isLogin" >{{username}}</span>
         <router-link v-else to="/login">登录</router-link>
      </template>
   </SdyHeader>
   <!-- 轮播图 -->
   <SdyHomeBanner />
   <!-- 导航 -->
   <SdyHomeNar />
   <!-- 秒杀 -->
   <SdyHomeHot />
   <!-- 商品列表 -->
   <SdyHomeGoodList />
</template>

<script setup lang="ts">
// 导入组件使用
import SdyHomeBanner from './components/SdyHomeBanner.vue';
import SdyHomeNar from './components/SdyHomeNar.vue';
import SdyHomeHot from './components/SdyHomeHot.vue';
import SdyHomeGoodList from './components/SdyHomeGoodList.vue';
import { useRouter, type Router } from 'vue-router';
import { ref, onMounted } from 'vue'
// 导入相关Api
import { getUserInfoApi } from '@/api/users'

// 拿到编程是导航器
const $router: Router = useRouter()
const inSearchHandler = () => {
   // console.log($router);
   $router.push('/search')
}

// 准备一个变量表示是否登陆过
const isLogin = ref<boolean>(false)
///准备一个变量表示用户名
const username = ref<string>('')
//1.验证token
const testToken = async () => {
   // 1-1. 从 localStorage 内拿到 token 和 user_id
   // 如果没有, 说明没有登录过
   const token = window.localStorage.getItem('token')
   const userid = window.localStorage.getItem('userid')
   if (!token || !userid) {

      isLogin.value = false
      return
   }
   // 如果有，说明你曾经登陆过（不能保证是否过期，不能保证是否被伪造）
   // 1-2.根据 id 和 token 去请求用户详细信息
   const res = await getUserInfoApi(userid)
   // console.log(res);
   // code: '200', message: '获取个人信息', data: Array(1)

   if (((res as unknown) as { code: string }).code === '10019') {
      isLogin.value = false
      return
   }

   //   表示登录过
   isLogin.value = true
   username.value = res.data[0].nickname
   return
}



onMounted(() => {
   testToken()
})
</script>

<style scoped  lang="scss">
// 导入全局样式

@import '@/styles/variable.scss';

.cate-icon {
   font-size: 24px;
   color: orange;
}
</style>